$(function () {
    initWholeTree();
});

function initWholeTree() {
// setting对象中包含zTree的设置属性
    var setting = {
        "view": {
//设置自定义图标
            "addDiyDom": showMyIcon,
            "addHoverDom": addHoverDom,
            "removeHoverDom": removeHoverDom
        },
        "data": {
            "key": {
                "url": "notExistsProperty" // 阻止点击节点后跳转
            }
        }
    };

    // 发送Ajax请求获取zNodes数据
    $.ajax({
        "url": "/menu/get/whole/tree",
        "type": "post",
        "dataType": "json",
        "success": function (res) {
            if (res.msg == "成功") {
                // 用于显示树形结构的节点数据
                var zNodes = res.data;
                // 执行树形结构的初始操作
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            } else {
                layer.msg("加载菜单数据失败！原因是：" + res.message);
            }
        },
        "error": function (response) {
            layer.msg("加载菜单数据失败！原因是：" + response.message);
        }
    });
}

function showMyIcon(treeId, treeNode) {
    console.log(treeId)
    console.log(treeNode)
    //拼写图标元素的id
    var icon_id = treeNode.tId + "_ico"
    //获取数据库里图表信息
    var newIco = treeNode.icon
    //修改样式
    $('#' + icon_id).removeClass().addClass(newIco)
}

function generateBtnGrp(treeNode) {
    //拼写id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";
    var $span = $("<span id='" + btnGrpSpanId + "'></span>")
    //声明3个超链接
    // 声明三种按钮
    var menuId = treeNode.id
    var addBtn = "<a onclick='showAddModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='添加子节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-plus rbg'></i></a>";
    var editBtn = "<a onclick='showEditModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='编辑节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-edit rbg'></i></a>";
    var removeBtn = "<a onclick='showConfirmModal(this)' id='" + menuId + "' class='btn btn-info dropdown-toggle btn-xs' style='margin-left:10px;padding-top:0px;' title='删除节点'>&nbsp;&nbsp;<i class='fa fa-fw fa-times rbg'></i></a>";
    //判断规则不同的超链接
    var level = treeNode.level
    // 根据level进行判断
    if (level == 0) {
        $span.append(addBtn);
    }
    if (level == 1) {
        if (treeNode.children.length > 0) {
            $span.append(addBtn + " " + editBtn);
        } else {
            $span.append(addBtn + " " + editBtn + " " + removeBtn);
        }
    }
    if (level == 2) {
        $span.append(editBtn + " " + removeBtn);
    }
    return $span
    //返回
}

//鼠标悬浮在节点上时调用此方法
function addHoverDom(treeId, treeNode) {

    // 在执行添加前，先进行判断，如果已经添加过，就停止执行
    // 组装按钮组所在的span标签的id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";

    var btnGrpSpanLength = $("#" + btnGrpSpanId).length;

    if (btnGrpSpanLength > 0) {
        return;
    }

    //获取按钮组
    var $btnGrpSpan = generateBtnGrp(treeNode);

    // 由于按钮组是放在当前节点中的超链接（a标签）后面，所以先定位到a标签
    // 按id生成规则组装a标签的id
    var anchorId = treeNode.tId + "_a";
    // 在a标签后面追加按钮组
    $("#" + anchorId).append($btnGrpSpan);
}

//鼠标移出节点时调用此方法
function removeHoverDom(treeId, treeNode) {
    // 组装按钮组所在的span标签的id
    var btnGrpSpanId = treeNode.tId + "_btnGrp";

    // 删除对应的元素
    $("#" + btnGrpSpanId).remove();
}

//添加菜单
function showAddModal(currentBtn) {

    // 打开模态框
    $("#menuAddModal").modal("show");

    // 将当前节点的id存入全局变量
    window.menuId = currentBtn.id;
}

//确定添加
$("#menuAddBtn").click(function () {
    // 收集表单填写的数据
    var name = $.trim($("#menuAddModal [name='name']").val());
    var url = $.trim($("#menuAddModal [name='url']").val());
    var icon = $("#menuAddModal [name='icon']:checked").val();
    if (name == null || name == "") {
        layer.msg("请填写菜单项名称！");
        return;
    }

    if (url == null || url == "") {
        layer.msg("请填写菜单项对应的访问地址！");
        return;
    }
// 发送Ajax请求
    $.ajax({
        "url": "/menu/save",
        "type": "post",
        "dataType": "json",
        "data": {
            "name": name,
            "url": url,
            "pid": window.menuId,   // 当前操作的节点是新节点的父节点
            "icon": icon
        },
        "success": function (res) {

            var result = res.msg;

            if (result == "成功") {
                layer.msg("操作成功！");

                initWholeTree();
            }

            if (result == "失败") {
                layer.msg(res.msg);
            }

        },
        "error": function (response) {
            layer.msg(response.message);
        }
    });

    $("#menuAddModal").modal("hide");
});

